<template>
  <el-select class="AddMenuDialog__select-user"
                 v-model="selectedMenuId"
                 filterable
                 remote
                 :remote-method="searchMenuList"
                 :loading="selectLoading"
                 placeholder="请输入菜单名称"
                 @change="getMenuValue()"
                 >
        <el-option
          v-for="item in MenuOptions" 
          :key="item.menuId"
          :label="item.menuName"
          :value="item.menuId"
          class="AddMenuDialog__select-option">
          
        <i class="el-icon-lx-peoplefill AddUserDialog__avatar"></i>
          <div style="float: left;">
            <strong class="text-grey-8">{{ item.menuName }}</strong>
            <span class="AddMenuDialog__select-username text-lb-65">{{ item.menuCode }}</span>
          </div>
          <i class="text-grey-8 el-icon-plus"
             style="float: right;line-height: 34px;"></i>
          <span style="float: right;"></span>
        </el-option>
      </el-select>  
</template>
<script>
import {queryMenuByCodeOrName_Url} from  "@/config/compentsapi";
export default {
   name: 'addMenuInput',
   data(){
       return{
         menuId:"",
            dialogVisible: false,
            selectedMenuId: '',
            selectLoading: false,
            MenuOptions: [],
            dialogLoading: false
       }
   },
   computed(){

   },
   created () {
   },
   methods:{
       create(){
         this.menuId = ""
            this.selectedMenuId = ''
            this.MenuOptions = []
            this.dialogVisible = true
       },
       searchMenuList(qrydesc){
           if(qrydesc !== '')
           {
               this.selectLoading = true
               const params = {
                   MENU_NAME:qrydesc,
                   pageNo:1
               }
               queryMenuByCodeOrName_Url(params).then(res =>{
                   this.MenuOptions = res.data.records;
                   this.selectLoading = false;
               })
           }else{
                this.MenuOptions = [];
           }
           
       },
       getMenuValue() {
         var menuInfo={};
         for (var i = 0; i < this.MenuOptions.length; i++) {
           if (this.MenuOptions[i].menuId == this.selectedMenuId) {
             menuInfo = this.MenuOptions[i];
           }
         }
         this.$emit("listenToAddMenuInput", menuInfo);
       }
   }
}
</script>
<style>
  .AddMenuDialog__select-user{
    width: 100%;
  }
  .AddMenuDialog__select-option.is-disabled {
    opacity: 0.5;
  }
  .AddMenuDialog__avatar {
    width: 24px;
    height: 24px;
    float: left;
    border-radius: 3px;
    color: #dadada;
    margin: 5px 10px 5px 0;
  }
  .AddMenuDialog__select-username {
    font-size: 12px;
  }
  .AddMenuDialog__roles {
    margin-top: 20px;
  }
  .AddMenuDialog__button-append {
    width: 100%;
    margin-top: 20px;
  }
</style>
